iT邦幫忙

1

JavaScript 基礎知識- .innerHTML 與 for 迴圈的運用

  • 分享至 

  • xImage
  •  

前一篇講到了 .innerHTML 來新增元素以及內容,還有組字串的技巧
這邊我們就來建立一個陣列,依序把資料輸入進去吧

首先先建立 HTML 結構:

<h1>名字列表</h1>
<ul class="list"></ul>

接著來建立一個 names 陣列,來存放多個名字:

var names = [
    {
        name: 'Jerry'
    },
    {
        name: 'Tom'
    },
    {
        name: 'Jack'
    }
]

這時候我們要準備來把資料依序放在 .list 下面了
首先我們先選取元素:

var el = document.querySelector('.list');

接著宣告一個變數來存放陣列的長度:

var Len = names.length;

再來宣告一個變數先存放空字串,至於這個變數要做什麼,後面會說明:

var str = '';

現在我們就可以用 for 迴圈依序把資料撈出來,再搭配組合字串放進 .list 內了

for(var i=0; i<Len; i++){
    var content = '<li>'+ names[i].name +'</li>';
    el.innerHTML = content;
}

照著上面做,這樣就依序把資料放好了嗎?
並不會的, .innerHTML 有一個特性每次輸出前會清空所有的設定,所以所有的標籤跟文字都會不見,所以照著上面的迴圈跑,最後頁面僅只會顯示出 Jack 這最後一筆資料而已
而為了要解決這樣的問題,str 變數就登場了,他是為了要解決 .innerHTML 這個問題,所以創造來存放累加字串的
而迴圈的撰寫也會如下:

for(var i=0; i<Len; i++){
    var content = '<li>'+ names[i].name +'</li>';
    str += content;
    // 如果想知道 str 是什麼,可以在 console 查看
    console.log(str);
}

跑完迴圈之後,字串也累加完了,這時候可以在元素下,輸出資料了:

el.innerHTML = str;

這時候頁面就會完整的呈現每筆資料了
試著親手寫寫看,了解看看吧!


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 則留言

1
ccutmis
iT邦高手 2 級 ‧ 2019-05-05 12:06:41

謝謝分享~我個人比較常用在迴圈裡直接抓 array-obj.length,像這樣縮寫也可以,縮排成一行雖然不是什麼了不起的技術,但是可以嚇唬新手^^"

for(var i=0; i<names.length; i++) el.innerHTML +='<li>'+ names[i].name +'</li>';

哈哈,謝謝分享,但一開始我還是習慣用簡單明瞭的方式 /images/emoticon/emoticon01.gif

ccutmis iT邦高手 2 級 ‧ 2019-05-06 10:18:35 檢舉

/images/emoticon/emoticon07.gif

0
harutsuki
iT邦新手 5 級 ‧ 2019-05-06 19:31:14

我覺得這個範例用來解釋map有更合適的感覺

el.innerHTML += names.map((x) => { return `<li>${x.name}</li>`}).join('')

整段下來就會剩下

var names = [
    { name: 'Jerry' },
    { name: 'Tom'   },
    { name: 'Jack'  }]

var el = document.querySelector('.list');
el.innerHTML += names.map(x => `<li>${x.name}</li>`).join('')

當然上面是建立於不須照排列順序的作法

如果要照順序排列一一執行的話,還是一樣只能使用for loop

map還沒有研究到,但還是謝謝大大的分享喔

我要留言

立即登入留言